<template>
  <view style="width: 100%; min-height: 100vh;" v-if="show_flag">
    <view style="width: 100%; height: 480upx; margin-bottom: 10%;">
      <view style="width: 100%; position:relative;" @click.stop="handlePlayVideo()">
        <image :src="video_data.video_url+'?vframe/jpg/offset/1'" alt=""
               style="width: 100%; height: 466upx;"></image>
        <image src="/static/icon/detail/bofang@2x.png"
               style="position: absolute; width: 50upx; height: 50upx; bottom: 25upx; right: 25upx;"></image>
        <view v-if="!video_data.is_free && !video_data.is_pay" class="flex flex-direction justify-center align-center charge-box" @click.stop="handleToPay(video_data.product && video_data.product.pay_type, video_data.product && video_data.product.sale_price, video_data.product && video_data.product.id,video_data.product && video_data.product.article_id)">
          <view style="font-size: 28upx; color: white; margin-bottom: 40upx;">
            此课程属于收费课程 购买支付后即可观看
          </view>
          <view class="flex justify-center align-center pay-box">
            去支付
          </view>
        </view>
      </view>
      <view>
        <video id="myVideo" :src="video_data.video_url" style="width: 0;" controls="true" show-fullscreen-btn="true"
               object-fit="contain" direction="0" @fullscreenchange="fullscreenchange">
        </video>
      </view>
    </view>
<!--    <view class="flex-direction" style="padding: 20% 0;">-->
<!--      <view class="flex justify-center align-center">-->
<!--        <image src="/static/image/shipinchakan@2x.png" style="width: 340upx; height: 226upx; margin-bottom: 14%;"></image>-->
<!--      </view>-->
<!--      <view style="font-size: 28upx; color:#1F1F1F; text-align: center;">知识转化 艺一帮平台</view>-->
<!--    </view>-->
    <!--支付框-->
    <view class="cu-modal bottom-modal" :class="pay_flag?'show':''" @click="pay_flag = false"
          @touchmove.stop.prevent="">
      <view class="cu-dialog" style="background-color: white; border-radius: 10upx 10upx 0 0;" @click.stop="">
        <view class="cu-bar justify-end" style="margin-bottom: 8%;">
          <view class="content" style="font-weight: bold; color: #333333; font-size: 26upx;">选择支付方式</view>
        </view>
        <view class="flex" style="padding: 0 40upx;">
          <radio-group style="width: 100%;" @change="handleChangeRadioChange">
            <view v-for="(item, index) in pay_type_list" style="margin-bottom: 8%;">
              <view class="flex justify-between align-center" style="width: 100%; margin-bottom: 32upx;">
                <view class="flex">
                  <image :src="item.img" style="width: 44upx; height: 44upx; margin-right: 10upx;"></image>
                  <view style="font-size: 26upx; color: #333333;">{{ item.name }}</view>
                </view>
                <radio class='radio' :value="index" :checked="pay_type === index"/>
              </view>
            </view>
          </radio-group>
        </view>
        <view class="flex justify-center align-center"
              @click="handleToNormalPay(video_data.product && video_data.product.pay_type, video_data.product && video_data.product.article_id, video_data.product && video_data.product.sale_price, video_data.product && video_data.product.id)"
              style="height: 98upx; background-color: #E52718; font-size: 28upx; color: white;">
          立即支付 <span style="font-size: 20upx;">（合计：¥{{video_data.product && video_data.product.sale_price}}）</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {orders_freeOrPasswordPay, orders_payOrder, pay_aliPayOrders} from "api/pay/pay";
import {videoTutorial_getOneById} from "api/tutorials/tutorials"

export default {
  data(){
    return {
      video: '', //视频路径
      is_show_video: false, //是否显示视频
      show_flag: false,
      is_free: '', //是否免费
      video_tutorial_id: '', //视频id
      pay_flag: false, //支付框
      pay_type: 0, //支付类型
      video_data: {}, //视频数据
      pay_type_list: [
        {
          name: '微信支付',
          img: '/static/icon/detail/weixin@2x.png'
        },
        {
          name: '支付宝支付',
          img: '/static/icon/detail/zhifubao@2x.png'
        },
        {
          name: '密码支付',
          img: '/static/icon/detail/mima@2x.png'
        }
      ], //支付方式列表
    }
  },
  methods: {
    pageInit(video_tutorial_id){
      videoTutorial_getOneById({video_tutorial_id}).then(res=>{
        console.log(res)
        if(res.data && res.data.video_tutorial && res.data.video_tutorial.product && res.data.video_tutorial.product.pay_type !== 'normal_password_pay'){
          this.pay_type_list = this.pay_type_list.slice(0,2)
        }
        this.video_data = res.data.video_tutorial;
        this.show_flag = true;
      })
    },
    //播放轮播视频
    handlePlayVideo(){
      this.videoContext = uni.createVideoContext('myVideo', this);
      this.videoContext.requestFullScreen();
      this.videoContext.play()
      this.is_show_video = true;
    },
    //视频全屏
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext.pause()
        this.is_show_video = false
      }
    },
    //去支付
    async handleToPay(pay_type, fee, product_id, article_id){
      let data = {
        f_table: 'product',
        f_id: product_id,
        fee: fee,
        pay_type: pay_type,
        article_id: article_id
      }
      let url_option = {}
      switch (pay_type) {
        case 'password_pay':
          let password_pay_data = JSON.stringify(data)
          url_option = {
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          }
          break;
        case 'free_pay':
          try {
            await this.passwordPay(data)
            url_option = {
              url: '/pages/passBand/paymentSuccessful/paymentSuccessful',
              query: {
                fee
              }
            }
          }catch (err){

          }
          break;
        case 'normal_pay':
        case 'normal_password_pay':
          this.pay_flag = true;
          break;
      }
      if (url_option.url) {
        this.$uniNavigateTo(url_option)
      }
    },
    passwordPay(data){
      return new Promise((resolve, reject) => {
        orders_freeOrPasswordPay(data).then(res => {
          console.log('成功')

          resolve()
        }).catch(err=>{
          reject(err)
        })
      })
    },
    //选择支付方式
    handleChangeRadioChange(e) {
      this.pay_type = e.target.value;
    },
    handleToNormalPay(pay_type, article_id, fee, product_id){
      let data = {
        f_table: 'product',
        f_id: product_id,
        fee: fee,
        article_id: article_id,
        pay_type: 'password_pay'
      }
      let user_id = uni.getStorageSync('user_info').id
      switch (this.pay_type) {
        case 0:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=product&f_id=${this.product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}`);
          // orders_payOrder(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'wxpay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       this.pageInit(this.video_tutorial_id)
          //       this.pay_flag = false;
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       console.log('success:' + JSON.stringify(res));
          //     },
          //     fail: (err)=> {
          //       this.pay_flag = false;
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err =>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 1:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=product&f_id=${this.product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}&type=1`);
          // pay_aliPayOrders(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       this.pageInit(this.video_tutorial_id)
          //       this.pay_flag = false;
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //     },
          //     fail: (err)=> {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err=>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 2:
          let password_pay_data = JSON.stringify(data)
          this.pay_flag = false;
          this.$uniNavigateTo({
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          })
          break;
      }
    }
  },
  onShow(){
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    uni.setNavigationBarTitle({
      title: currentPage.options.video_name
    });
    this.video_tutorial_id = currentPage.options.video_tutorial_id;
    this.pageInit(currentPage.options.video_tutorial_id)
  }
}
</script>

<style  lang="less" scoped>
/deep/ .uni-radio-input-checked {
  border-color: #E52718 !important;
}

/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  background-color: #ffffff !important;
}

/deep/ uni-radio .uni-radio-input::after {
  background-color: #E52718 !important;
  border: 6upx solid #E52718 !important;
  border-color: #E52718 !important;
  left: -1 !important;
}
.charge-box{
  width: 100%;
  height: 466upx;
  padding: 0 32%;
  background: rgba(55,55,55,0.70);
  position: absolute;
  top: 0;
  left: 0;
}
.pay-box{
  width: 358upx;
  height: 70upx;
  border-radius: 40upx;
  background-color: #E52718;
  font-size: 26upx;
  color: white;
}
</style>
